<%@ page import="javax.mail.Session" %>
<%--
  Created by IntelliJ IDEA.
  User: houxy
  Date: 2016/8/8
  Time: 12:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>救助飞行运行管理系统</title>
    <script src='<spring:url value="/resources/js/jquery-1.11.0.js"></spring:url>'></script>

    <script src='<spring:url value="/resources/common//bootstrap/js/bootstrap.min.js"></spring:url>'></script>
    <link rel="shortcut icon" href='<spring:url value="/resources/images/logo.ico"></spring:url>'/>

<%--    <link rel="stylesheet" type="text/css"--%>
<%--          href='<spring:url value="/resources/common/metronic/media/css/style-metro.css"></spring:url>'>--%>

    <link rel="stylesheet" type="text/css"
          href='<spring:url value="/resources/common/metronic/media/css/style.css"></spring:url>'>

    <link rel="stylesheet" type="text/css"
          href='<spring:url value="/resources/common/bootstrap/css/bootstrap.min.css"></spring:url>'>

    <style type="text/css">
        body, html {
            height: 100%;
            min-width: 800px;
            min-height: 860px;
            margin: 0;
        }

        button {
            height: 50px;
            width: 150px;
            margin-right: 30px;
            border-radius: 0 !important;
        }

        #header {
            background-color: #3498db;
            height: 50%;
            width: 100%;
            text-align: center;
        }

        #logo {
            margin-top: 1%;
        }

        #header span {
            font-size: 38px;
            color: #ecf0f1;
        }

        #bodyer {
            width: 100%;
            height: 50%;
            text-align: center;
        }

        .login-page {
            margin: 0 auto;
            margin-top: -100px;
            width: 450px;
            height: 250px;
            background-color: #FFF5EE;
            color: #808080;
            box-shadow: 5px 4px 2px 2px #ccc;
        }

        .login-button {
            margin: 0 auto;
            width: 450px;
            height: 50px;
            color: #808080;
        }

        .login-page div input {
            background-color: #FFF5EE;
            margin-left: 20px;
            height: 40px;
            border: 0;
            outline: none;
        }

        .log1 {
            position: absolute;
            margin-top: 40px;
            margin-left: 40px;
            font-size: 16px;
        }

        .log2 {
            position: absolute;
            margin-top: 110px;
            margin-left: 40px;
            font-size: 16px;
        }

        .log3 {
            position: absolute;
            margin-top: 180px;
            margin-left: 40px;
            font-size: 16px;
        }

        .sol1 {
            position: absolute;
            margin-top: 80px;
            height: 2px;
            width: 370px;
            margin-left: 40px;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        .sol2 {
            position: absolute;
            margin-top: 150px;
            height: 2px;
            width: 370px;
            margin-left: 40px;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        #footer {
            width: 100%;
            text-align: center;
            color: #808080;
            font-size: 16px;
        }

        .alert_button {
            margin-right: 0px;
            width: 56px;
            border: 0;
            padding: 7px 14px;
            outline: none;
            line-height: 20px;
            margin-bottom: 0;
            display: inline-block;
            vertical-align: middle;
            height: 30px;
            color: white;
            text-shadow: none;
            background-color: #35aa47;
        }

        .alert_button:hover, .alert_button:focus {
            border: 0;
            background-color: #1d943b;
            color: #fff;
            outline: none;
        }
        .modal label{
            font-size: 14px;
            font-weight: normal;

        }
        #reset_password{
            font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial;
        }
        .validTip {
            font-size: 20px;
            color: red;
            font-weight: bold;
            padding-top: 5px;
        }
        .btn-cancel:hover{
            color: #333333;
            background-color: #d8d8d8 !important;
        }
    </style>
    <script src='<spring:url value="/resources/userJs/overrideAlertAndConfirm.js"/>'></script>
    <script src='<spring:url value="/resources/js/crypto-js.min.js"/>'></script>
    <script src='<spring:url value="/resources/js/cryptoUtil.js"/>'></script>

    <script>
        let ctx = "${ctx}";
        $(function () {
            //按回车实现登录
            $(".login").keyup(function (event) {
                var code = event.keyCode;
                if (code == 13) {
                    login();
                }
            });
        });

        function login() {
            let userName = $("#userName").val().trim();
            let password = $("#pswd").val().trim();
            let verCode = $("#verCode").val().trim();
            let key = genAesSecret()
            if(key==null|| key==undefined){
                alert("登录失败!")
                return
            }
            if (userName == "") {
                alert("用户名不能为空！")
                return
            }
            if (password == "") {
                alert("密码不能为空！")
                return
            }
            if (verCode == '') {
                alert("请输入验证码!")
                return
            }
            userName = encrypt(userName,key)
            password = encrypt(password,key)
            $.ajax({
                url: "checklogin",
                type: "post",
                async: false,
                data: {"userName": userName, "password": password, "verCode": verCode,"key":key},
                dataType: "json",
                success: function (data) {
                    let status = data.status;
                    if (status == 0) {
                        window.location.href = "desktop";
                    }else{
                        $("#pic").click();
                        let msg = data.msg
                        if(msg == 10){
                            $("#reset_password").modal('show')
                            return
                        }else if(msg == 11){
                            window.location.href = "desktop";
                        }else if(msg == 12){
                            alert(getMessage(msg)+"请"+data['waitTime']+"分钟后重试！")
                            return
                        }
                        alert(getMessage(msg))
                        if(msg == 4){
                            $("#verCode").val("");
                        }
                    }
                },
                error: function () {
                    alert("登录异常，请稍后重试!");
                }
            })
        }
        function resetPassword() {
            let userName = $("#user_name").val().trim()
            let oldPassword = $("#oldPassword").val().trim();
            let newPassword = $("#newPassword").val().trim();
            let confPassword = $("#confPassword").val().trim();
            let key = genAesSecret();
            if(userName == ''){
                alert("请输入用户名！")
                return;
            }
            userName = encrypt(userName,key)

            if (oldPassword == '') {
                alert("请输入旧密码！")
                return;
            }
            if (newPassword == '') {
                alert("请输入新密码！")
                return;
            }
            if(oldPassword == newPassword){
                alert("旧密码和新密码不能相同！")
            }
            if(!regex.test(newPassword)){
                alert("密码强度不符合要求（须包含大小写字母、数字及特殊字符，且长度8位以上）！")
                return;
            }
            if (confPassword == '') {
                alert("请输入确认密码！")
                return;
            }
            if (newPassword != confPassword) {
                alert("两次输入新密码不一致！");
                return;
            }
            oldPassword = encrypt(oldPassword,key)
            newPassword = encrypt(newPassword,key)
            confPassword = encrypt(confPassword,key)
            $.ajax({
                url: "resetPassword",
                type: "post",
                dataType: "json",
                data: {"userName":userName,"oldPassword": oldPassword, "newPassword": newPassword, "confPassword": confPassword,"key":key},
                async: false,
                cache: "false",
                success: function (data) {
                    let status = data.status
                    if (status == 0) {
                        $("#reset_password").modal('hide')
                        alert("修改成功！",ctx)
                    } else {
                        alert(getMessage(data["msg"]));
                    }
                },
                error: function () {
                    alert("系统繁忙，请稍后重试！");
                }
            })
        }
        function cancelModify() {
            $("#oldPassword").val("");
            $("#newPassword").val("");
            $("#confPassword").val("");
        }
    </script>
</head>
<body>
<div id="login">
    <div id="header">
        <div>
            <img id="logo" src='<spring:url value="/resources/images/logo.png"></spring:url>'>
        </div>
        <span><b>救助飞行运行管理系统</b></span><br>
        <span>Rescue flight operation management system</span>
    </div>
    <div id="bodyer">
        <div class="login-page">
            <div class="form-inline log1">
                <label for=""><span class="glyphicon glyphicon-user"></span>&nbsp用户名：</label>
                <input type="text" id="userName" class="login">
            </div>
            <div class="sol1"></div>
            <div class="form-inline log2">
                <label for=""><span class="glyphicon glyphicon-eye-open"></span>&nbsp密&nbsp&nbsp&nbsp&nbsp码：</label>
                <input type="password" id="pswd" class="login">
            </div>
            <div class="sol2"></div>
            <div class="form-inline log3">
                <label for=""><span class="glyphicon glyphicon-qrcode"></span>&nbsp验证码：</label>
                <input type="text" id="verCode" style="width: 120px" maxlength="4" class="login">
                <span><img id="pic" src="randomPic" title="点击更换"
                           onclick="this.src='randomPic?x='+Math.random()"/></span>
            </div>
        </div>
        <div class="login-button">
            <div class="form-inline">
                <%--<a href="javascript:;" class="pull-left" style="line-height: 83px;">忘记密码</a>--%>
                <button type="button" class="btn btn-primary pull-right" onclick="login()"><span
                        class="glyphicon glyphicon-share-alt">登录</span></button>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <span>Copyright © 2016 救助飞行运行管理系统</span>
</div>
<%--修改密码模态框--%>
<div id="reset_password" class="modal hide fade " tabindex="-1" data-width="760">
    <div class="modal-header" style="border-bottom: 1px solid #EFEFEF; background-color: #3498db;color: #fff;">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="cancel();"></button>
        <span id="add">
          <h4>密码已过期，请修改！</h4>
        </span>
    </div>
    <div class="modal-body">
        <form:form id="addForm">
            <div class="form-inline bom" style = "margin-bottom: 5px;">
                <label class="help-inline span1" style="width:150px;text-align: right">用户名：</label>
                <input type="text" id="user_name" name="user_name" class="input-data-middle"><span
                    class="validTip">*</span>
            </div>
            <div class="form-inline bom" style = "margin-bottom: 5px;">
                <label class="help-inline span1" style="width:150px;text-align: right">旧密码：</label>
                <input type="password" id="oldPassword" name="oldPassword" class="input-data-middle"><span
                    class="validTip">*</span>
            </div>
            <div class="form-inline bom" style = "margin-bottom: 5px;">
                <label class="help-inline span1" style="width:150px;text-align: right">新密码：</label>
                <input type="password" id="newPassword" name="newPassword" class="input-data-middle"><span
                    class="validTip">*</span>
            </div>
            <div class="form-inline bom" >
                <label class="help-inline span1" style="width:150px;text-align: right">确认密码：</label>
                <input type="password" id="confPassword" name="confPassword" class="input-data-middle"><span
                    class="validTip">*</span>
            </div>
        </form:form>
    </div>
    <div class="modal-footer" style="border-top: 0;">
        <button type="button" class="btn btn-primary" style=" width: 56px;height: 34px;margin-right: 0" onclick="resetPassword()">修改</button>
        <button type="button" data-dismiss="modal" class="btn btn-cancel " style=" width: 56px;height: 34px;margin-right: 0" onclick="cancelModify()">取消</button>
    </div>
</div>
</body>
</html>
